<template>
    <u-popup v-model="show" mode="center" border-radius="32" :mask="false" :closeable="true" close-icon="close-circle"
        close-icon-color="#ff0000" close-icon-size="40" width="98%"
        height="1200" @close="closeModel">
        <view class="record_pop">
            <view class="record_title">
                记录
            </view>
            <view class="members_info">
                <text>会员: {{user_info.user_name}}</text>
                <text style="margin: 0 20rpx;">|</text>
                <text>编号: {{user_info.phone}}</text>
            </view>
            <view class="date_select">
                <view class="date_item" @click="setDate(1)" :class="getDate == 1 ? 'date_item_active' : ''">
                    今 天
                </view>
                <view class="date_item" @click="setDate(2)" :class="getDate == 2 ? 'date_item_active' : ''">
                    昨 天
                </view>
                <view class="date_item" @click="setDate(3)" :class="getDate == 3 ? 'date_item_active' : ''">
                    本 周
                </view>
                <view class="date_item" @click="setDate(0)" :class="getDate == 0 ? 'date_item_active' : ''">
                    历 史
                </view>
            </view>
            <view class="total_info">
                <view class="total_info_item">
                    <view class="total_title">
                        当日结算
                    </view>
                    <text class="total_text">{{total_info.date}}</text>
                </view>
                <view class="total_info_item">
                    <view class="total_title">
                        彩总
                    </view>
                    <text class="total_text">游戏</text>

                </view>
                <view class="total_info_item">
                    <view class="total_title">
                        总流水
                    </view>
                    <text class="total_text">{{total_info.water}}</text>

                </view>
                <view class="total_info_item">
                    <view class="total_title">
                        总盈亏
                    </view>
                    <text class="total_text">{{total_info.profit}}</text>

                </view>
                <view class="total_info_item">
                    <view class="total_title">
                        佣金
                    </view>
                    <text class="total_text">0</text>
                </view>
            </view>
            <view class="record_table">
                <view class="tableTitle">
                    <view class="th">
                        单号
                    </view>
                    <view class="th">
                        时间
                    </view>
                    <view class="th">
                        彩种
                    </view>
                    <view class="th" style="width: 120rpx;">
                        内容
                    </view>
                    <view class="th" style="width: 84rpx;">
                        进/出项
                    </view>
                    <view class="th" style="width: 120rpx;">
                        实际盈亏
                    </view>
                </view>
                <scroll-view scroll-y="true" class="tableBody" @scrolltolower="handleMore()">
                    <view class="tr" v-for="(userPage, index) in tdList" :key="index">
                        <view class="td" style="width: 100rpx;">
                            <view class="order">{{userPage.id}}</view>
                            <view class="winLose">
                                <view class="role">{{userPage.lz_result.main}}</view>
                                <view v-if="userPage.delta_amt > 0" style="color:red">赢</view>
                                <view v-if="userPage.delta_amt <=0" style="color:green">输</view>
                            </view>
                        </view>
                        <view class="td" style="width: 100rpx;">
                            <view class="date">{{userPage.created_at.split(' ')[0]}}</view>
                            <view class="time">{{userPage.created_at.split(' ')[1]}}</view>
                        </view>
                        <view class="td" style="width: 100rpx;margin-right: 0rpx;">
                            <view class="colorof">
                               {{userPage.type_name}}
                            </view>
                        </view>
                        <view class="td" style="width: 100rpx;">
                            <view class="body">
                                <!-- <view class="gameno">
                                     {{userPage.detail}}
                                </view> -->
								<view class="gameno" v-for="detail in userPage.detailArr" :key="detail">
								     {{detail}}
								</view>
                                <view class="">
                                    
                                </view>
                                <view class="">
                                    [赔率:{{userPage.game_peilv}}]
                                </view>
                            </view>
                        </view>
                        <view class="td" style="width: 100rpx;">
                            <view class="amount-red" :class="{'amount-green':userPage.delta_amt<1}">
                                 {{userPage.delta_amt}}
                            </view>
                        </view>
                        <view class="td" style="width: 100rpx;">
                            <view class="amount-red" :class="{'amount-green':userPage.delta_amt<1}">
                                {{userPage.delta_amt}}
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </u-popup>
</template>

<script>
	import api from "@/api/log"
    export default {
        props: ['showModel'],
        data() {
            return {
                show: false,
				getDate: 1,
				sel:{},
				total_info:[],
				tdList:[],
				user_info:[],
				//分页条件
				pageCondition: {
					//当前页后台字段是这个名字
					page: 1,
					//每页条数
					limit: 50
				}
            }
        },
        watch: {
            'showModel'(val) {
                this.show = val
				this.pageCondition.page = 1
				this.tdList = []
				this.getLog()
				this.getLogby()
            }
        },
		mounted(){
			this.user_info = uni.getStorageSync('login_user_info');
			this.sel.type= this.getDate;
			this.getLog();
			this.getLogby();
		},
        methods: {
            closeModel() {
                this.$parent.$parent.showRecord = false
                this.$parent.$parent.current = 5
            },
			/**
			 * 加载更多
			 * **/
			handleMore() {
				this.pageCondition.page ++ 
				this.getLog()
			},
			getLog(){
				this.sel.page = this.pageCondition.page
				this.sel.limit = this.pageCondition.limit
				api.betlog(this.sel).then((res) => {
					if (res.data.code == 200) {
						// this.tdList = res.data.data.data
						this.tdList.push.apply(this.tdList, res.data.data.data)
						if(this.tdList.length > 0) {
							this.tdList.forEach(el => {
								el.detailArr = el.detail.split('：')
							})
						}
						if(res.data.data.data.length < 1 && this.pageCondition.page > 1) {
							this.pageCondition.page -= 1
						}
					}
				})
			},
			// 调用统计
			getLogby(){
				api.betlogby(this.sel).then((res) => {
					if (res.data.code == 200) {
						this.total_info = res.data.data
					}
				})
			},
			setDate(val) {
				this.getDate = val
				this.sel.type=val;
				this.pageCondition.page = 1
				this.tdList = []
				this.getLog();
				this.getLogby();
			}
        }
    }
</script>

<style lang="scss" scoped>
    /deep/ .u-mode-center-box {
        background-color: rgba(0, 0, 0, .8);

        .u-close--top-right {
            right: 8rpx;
            top: 8rpx;
        }
    }

    .record_pop {
        width: 100%;
        height: 100%;
        padding: 32rpx 20rpx 20rpx 20rpx;
        color: #FFFFFF;
        border: 2rpx solid #635847;
        border-radius: 32rpx;
        .record_title {
            text-align: center;
            font-size: 40rpx;
        }

        .members_info {
            font-size: 28rpx;
            text-align: center;
            margin-top: 36rpx;
            margin-bottom: 22rpx;
        }

        .date_select {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 52rpx;
            margin-bottom: 24rpx;

            .date_item {
                width: 136rpx;
                color: #7f7f7f;
                height: 52rpx;
                border-radius: 30rpx;
                font-size: 28rpx;
                border: 2rpx solid #666;
                line-height: 52rpx;
                text-align: center;
            }

            .date_item_active {
                background: linear-gradient(to right, #af9a6e, #f5d89a);
                color: #1D1C22;
            }
        }

        .total_info {
            width: 100%;
            height: 92rpx;
            background-color: #000;
            border-radius: 16rpx;
            display: flex;
            padding: 4rpx 0;
            margin-bottom: 8rpx;

            .total_info_item {
                width: 136rpx;
                position: relative;
                text-align: center;
                font-size: 24rpx;

                .total_title {
                    text-align: center;
                    font-size: 26rpx;
                    margin-bottom: 14rpx;
                }

                .total_text {
                    color: #7f7f7f;
                    white-space: nowrap;
                    transform: scale(.9);
                }
            }

            .total_info_item:not(:last-child)::after {
                position: absolute;
                content: '　';
                top: 20rpx;
                right: 0;
                width: 2rpx;
                height: 48rpx;
                background: linear-gradient(#af9a6e, #f5d89a);
            }
        }

        .record_table {
            width: 100%;
            height: 668rpx;
            padding: 0 16rpx;

            .tableTitle {
                height: 60rpx;
                border-bottom: 2rpx solid #ebd093;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .th {
                    line-height: 60rpx;
                    text-align: center;
                    width: 100rpx;
                    font-size: 24rpx;
                    transform: scale(.9);
                    color: #FFFFFF;
                    font-weight: 800;
                }
            }

            .tableBody {
                height: 90%;
                overflow: auto;

                .tr {
                    border-bottom: 2rpx solid #ebd093;
                    display: flex;
                    // justify-content: space-between;
                    align-items: center;
                    // padding: 0 0 12rpx 0;
                    width: 100%;

                    .td {
                        font-size: 24rpx;
                        text-align: center;
                        // width: 100rpx;
                        color: #FFFFFF;
                        margin-right: 14rpx;
                        .order {
                            transform: scale(.7);
                            transform-origin: 10% 20%;
                        }

                        .winLose {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            .role {
                                width: 44rpx;
                                height: 44rpx;
                                line-height: 44rpx;
                                text-align: center;
                                border-radius: 50%;
                                background-color: #f1141b;
                                margin-right: 8rpx;
                            }
                        }

                        .date {
                            transform: scale(.8);
                            transform-origin: 0 0;
                            white-space: nowrap;
                        }

                        .time {
                            transform: scale(.8);
                        }

                        .colorof {
                            transform: scale(.9);
                            // transform-origin: 0 0;
                            color: #ebd093;
                        }
                        .body{
                            width: 148rpx;
                            transform: scale(.9);
                            line-height: 24rpx;
                            .gameno{
                                width: 100%;
                                transform: scale(.88); 
                                word-wrap:break-word;
								margin-bottom: 6rpx;
                            }
                            // transform-origin: 0 0;
                        }
						.amount-red{
							color: #ff0000;
							width: 100rpx;
						}
						.amount-green{
							color: green;
						}
                    }
                }
            }
        }
		
    }
	
</style>
